<template>
  <div>
    <el-button type="primary" @click="grant">授权</el-button>
    <el-tree :data="data" show-checkbox default-expand-all node-key="menuId" ref="tree" highlight-current
             :props="defaultProps">
    </el-tree>

  </div>
</template>

<script>
//
import service from "@/utils/request";

export default {
  name: 'RoleGrant',
  data() {
    return {
      data: [{
        id: 1,
        label: '系统管理',
        children: [{
          id: 4,
          label: '用户管理'
        },
          {
            id: 6,
            label: '角色管理',
          }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    }
  },
  methods: {
    queryAllMenu() {
      // queryAll
      service.get('/menu/queryAll').then((data) => {
        console.log(data);
        this.data = data;
        //查询完菜单 之后 才能查询已授权，（查 √）
        // this.queryGrant();
      })
    },
      // queryGrant(){
      //   let roleId = this.$route.query.roleId
      //   service.get('/menu/queryGrant',(menuIds)=>{
      //     console.log(menuIds);
      //     this.$refs.tree.setCheckedKeys(menuIds,true);
      //   },{roleId:roleId})
      // },
      grant(){
        //获取当前 的角色id
        let roleId = this.$route.query.roleId
        console.log("roleId",roleId)
        //获取选中的 菜单的id
        let menuId = [];
        let nodes = this.$refs.tree.getCheckedNodes(false,true);
        console.log(nodes);
        nodes.forEach((item)=>{
          menuId.push(item.menuId)
        })
        //选中的菜单id
        console.log(menuId);
        service.post('/menu/grant',{roleId: roleId, menuId: menuId}).then((success) => {
          console.log("ret",success);
          if(success){
            this.$message({
              message: '授权成功',
              type: 'success'
            });
          }else{
            this.$message({
              message: '授权失败',
              type: 'error'
            });
          }
        })
      }
    },
    created() {
      // console.log(this.$route.query);
      this.queryAllMenu();
    }
  }
</script>

<style>
</style>